<template>
	<div class="acount-page">
		<div class="head-tab flex f-mi pad-T1">
            <div class="tab flex" style="width: 30%;">
                <div class="items" :class="activeIndex === 'person' ? 'active':''" @click="tabClick('person')">
                    <span class="fs-16">人员</span>
                    <span class="fs-16">{{userList.length}}</span>
                </div>
                <div class="items" :class="activeIndex === 'dep' ? 'active':''" @click="tabClick('dep')">
                    <span class="fs-16">部门</span>
                    <span class="fs-16">{{departList.length}}</span>
                </div>
            </div>
            <div v-if="activeIndex === 'person'" class="flex" style="width: 40%;">
                <div style="width: 50%;text-align: center;">积分</div>
                <div style="width: 50%;text-align: center;">跟单</div>
            </div>
            <div style="width: 40%;text-align: center;" v-else>部门人数</div>
            <div style="width: 30%;" class="flex f-right">
                <div v-if="activeIndex === 'person'" class="text-btn" @click="personClick">
                    <img src="../assets/images/add-icon.png" />
                    <span class="t marg-Lhalf">添加账号</span>
                </div>
                <div v-else class="text-btn" @click="depClick">
                    <img src="../assets/images/add-icon.png" />
                    <span class="t marg-Lhalf">添加部门</span>
                </div>                
            </div>
        </div>
		<div class="">
			<template v-if="activeIndex === 'person'">
				<!-- 人员 -->
				<div class="warp-box" v-for="(item,index) in userList" :key="index">
					<div class="flex left w" @click="viewInfo(item)">
						<div class="pic">
							<img :src="item.profile" />
						</div>
						<div class="pad-L1">
							<div style="margin-bottom: 5rpx;">
								<span class="fs-16">{{item.name}}</span>
								<span class="t-eight">（{{item.branch}}）</span>
							</div>
							<div class="">
								<img style="width: 22rpx;" src="../assets/images/phone-icon.png" />
								<span style="color: #2A82E4;">{{item.phone}}</span>
							</div>
						</div>
					</div>
					<div class="flex middle">
						<div class="w50 fs-16 fw-7 t-cen" style="color: #FF5733;">
							{{item.money}}
						</div>
						<div @click="goDetail(item)" class="w50 fs-16 fw-7 t-cen" style="color: #2967E3;cursor: pointer;"> 
							{{item.clue_total}} 
						</div>
					</div>
					<div class="pop-box right t-cen">
                        <el-button @click="userChange(item)" class="fs-16 btn" type="text" style="color:">
                            <img style="width: 18px" src="../assets/images/jf-icon.png" alt="">
                            积分修改
                        </el-button>
                        <el-button @click="userEdit(item)" class="fs-16 btn" type="text">
                            <img style="width: 17px" src="../assets/images/bj-icon.png" alt="">
                            账户编辑
                        </el-button>
                        <el-button v-if="item.status == 1" @click="userUse(item,0)" class="fs-16 btn" type="text">
                            <img style="width: 17px" src="../assets/images/zt-icon.png" alt="">
                            暂停
                        </el-button>
                        <el-button v-if="item.status == 0" @click="userUse(item,1)" class="fs-16 btn" type="text">
                            <img style="width: 18px" src="../assets/images/qy-icon.png" alt="">
                            启用
                        </el-button>
                        <el-button @click="userDel(item)" class="fs-16 btn" type="text">
                            <img style="width: 17px" src="../assets/images/sc-icon.png" alt="">
                            删除
                        </el-button>
					</div>
				</div>
				<div class="page" v-if="userTotal > 0">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="pageSize"
						layout="prev,pager,next,total"
						:total="userTotal">
					</el-pagination>
				</div>
			</template>
			<template v-else>
				<!-- 部门 -->
				<div class="warp-box" v-for="(item,index) in departList" :key="index">
					<div class="" style="width: 30%">
						{{item.branch_title}}
					</div>
					<div style="width: 40%;text-align: center;">
						{{item.quantity}}人
					</div>
					<div class="pop-box right t-cen">
                        <el-button class="fs-16 btn" type="text" @click="departEdit(item)">
                            <img style="width: 17px" src="../assets/images/bj-icon.png" alt="">
                            编辑
                        </el-button>
                        <el-button class="fs-16 btn" type="text" @click="departDel(item.branch_id)">
                            <img style="width: 17px" src="../assets/images/sc-icon.png" alt="">
                            删除
                        </el-button>
					</div>
				</div>
				<div class="page" v-if="departTotal > 0">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="pageSize"
						layout="prev,pager,next,total"
						:total="departTotal">
					</el-pagination>
				</div>
			</template>
		</div>
        <el-dialog title="积分调整" :visible.sync="dialogVis" :close-on-click-modal="false" width="400px" center @close="dialogVis = false">
			<div class="inter-page">
				<div class="inter-box t-cen">
					<div class="pic">
						<img :src="viewData.profile"/>
					</div>
					<div class="desc marg-B3">
						<div class="fs-20 t-cen marg-B2">{{viewData.name}}</div>
						<div class="fs-12 t-cen marg-B1">
							<span class="t-eight">他的积分</span>
							<span class="t-three">{{viewData.money}}</span>
						</div>
					</div>
					<div class="flex f-be">
						<el-button type="primary" @click="userChange(viewData)" class="points-btn">积分调整</el-button>
						<el-button type="primary" @click="goDetail(viewData)" class="save-btn">查看跟进</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		<addDepartment :isDeptDialog="isDeptDialog" :departType="departType" @depCancel="depCancel" :departInfo="departInfo"/>
        <addUser :allDepartList="allDepartList" :isUserDialog="isUserDialog" :userType="userType" @userSure="userSure" @userCancel="userCancel" :itemData="itemData"/>
		<integralChange :isIntergral="isIntergral" :integralData="integralData" @integralClose="integralClose"/>
	</div>
</template>

<script>
    import addDepartment from './addDepartment.vue'
    import addUser from './addUser.vue'
	import integralChange from './integralChange'
	import {request} from "@/assets/js/utils/request";
	export default{
        components: {
            addDepartment,
            addUser,
			integralChange
        },
		data() {
			return {
				isShow: false,
				activeIndex: 'person',
                isUserDialog: false,
                isDeptDialog: false,
				userList: [],
				departList: [],
				currentPage: 1,
				pageSize: 10,
				userTotal: 0,
				departTotal: 0,
				departInfo: {},
				departType: '',
				allDepartList: [],
				isIntergral: false,
				integralData: {},
				itemData: {},
				userType: '',
				dialogVis: false,
				viewData: {}
			}
		},
		created() {
			this.getUserData()
			this.getDepartData()
			// this.getAllDepart()
		},
		methods: {
			viewInfo(params) {
				this.viewData = params
				this.dialogVis = true
			},
			goDetail(params) {
				this.$router.push({
					path: '/lawyerDetail',
					query: {
						uid: params.uid
					},
				});
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1
				if(this.activeIndex === 'person') {
					this.getUserData()
				} else {
					this.getDepartData()
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val
				if(this.activeIndex === 'person') {
					this.getUserData()
				} else {
					this.getDepartData()
				}
			},
			integralClose() {
				this.isIntergral = false
				this.getUserData()
			},
			// 用户
			userSure() {
				this.isUserDialog = false
				this.getUserData()
			},
			userChange(params) {
				this.isIntergral = true
				this.integralData = params
			},
			userEdit(params) {
				this.userType = 'edit'
				this.isUserDialog = true
				this.itemData = params
			},
			userUse(params,status) {
				const formData = new FormData();
				formData.append('uid',params.uid);
				formData.append('status',status)
				request({
					url: '/user/lawyer/status',
					method: 'POST',
					headers: {
						'Content-Type': 'multipart/form-data'
					},
					data: formData,
				}).then(res => {
					if(res.code == 200) {
						this.$message({
							message: '状态已修改',
							type: 'success'
						});
						this.getUserData()
					} else {
						this.$message.error(res.message);
					}
				})
			},
			userDel(params) {
				this.$confirm('确认删除该用户吗?',{
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
				    const formData = new FormData();
				    formData.append('uid',params.uid);
				    request({
				    	url: '/user/lawyer/delete',
				    	method: 'POST',
				    	headers: {
				    		'Content-Type': 'multipart/form-data'
				    	},
				    	data: formData
				    }).then(res => {
				    	if(res.code == 200) {
				    		this.$message({
				    			message: '已删除',
				    			type: 'success'
				    		});
				    		this.getUserData()
				    	} else {
				    		this.$message.error(res.message);
				    	}
				    })
				}).catch(() => {
				    this.$message({
				        type: 'info',
				        message: '已取消'
				    });          
				});
			},
			// 部门编辑
			departEdit(params) {
				this.departType = 'edit'
				this.departInfo = params
				this.isDeptDialog = true
			},
			departDel(params) {				
				this.$confirm('确认删除该部门吗?',{
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
				    const formData = new FormData();
				    formData.append('branch_id',params);
					request({
						url: '/user/branch/delete',
						method: 'POST',
						headers: {
							'Content-Type': 'multipart/form-data'
						},
						data: formData
					   }).then(res => {
						if(res.code == 200) {
							this.$message({
								message: '已删除',
								type: 'success'
							});
							this.getDepartData()
						} else {
							this.$message.error(res.message);
						}
				   })
				}).catch(() => {
				    this.$message({
				        type: 'info',
				        message: '已取消'
				    });          
				});
			},
            depCancel() {
				this.isDeptDialog = false
				this.getDepartData()
            },
            userCancel() {
				this.userType = 'add'
                this.isUserDialog = false
            },
			tabClick(params){
				if(params == 'person') {
					this.activeIndex = 'person'
				} else {
					this.activeIndex = 'dep'
				}
			},
			personClick() {
				this.userType = '添加用户'
				this.isUserDialog = true
			},
			depClick() {
				this.isDeptDialog = true
			},
			// 获取所有部门数据
			// getAllDepart() {
			// 	request({
			// 		url: '/user/branch/list',
			// 		method: 'get'
			// 	}).then(res => {
			// 		if(res.code == 200) {
			// 			this.allDepartList = res.data.list || []
			// 		} else {
			// 			this.$message.error(res.msg);
			// 		}
			// 	})
			// },
			// 获取部门数据
			getDepartData() {
				request({
					url: `/user/branch/list?page=${this.currentPage}`,
					method: 'GET'
				}).then(res => {
					if(res.code == 200) {
						this.departTotal = res.data.quantity
						this.departList = res.data.list || []
						// 用户添加部门数据
						this.allDepartList = res.data.list || []
					} else {
						this.$message.error(res.message);
					}
				})
			},
			// 人员列表
			getUserData() {
				request({
					url: `/user/lawyer/list?page=${this.currentPage}`,
					method: 'get'
				}).then(res => {
					if(res.code == 200) {
						this.userList = res.data.list || []
						this.userTotal = res.data.quantity
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.acount-page{
        border-radius: 8px;
        background: #fff;
        .head-tab{
            padding: 10px 30px;
            border-bottom: 1px solid #E5E5E5;
        }
		.tab{
			.items{
				cursor: pointer;
                margin: 0 30px;
				height: 42px;
                text-align: center;
				line-height: 42px;
                color: #808080;
			}
			.active{
                font-weight: 600;
                color: #222E4F;
				border-bottom: 2px solid #222E4F;
			}
		}
		.warp-box{
			display: flex;
			align-items: center;
			position: relative;
			padding: 10px 30px;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 16px;
			.left{
				width: 30%;
			}
			.middle{
				width: 40%;
			}
            .right{
                width: 30%;
            }
			.pic{
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
			}
			.more-box{
				position: absolute;
				right: 24rpx;
				top: 6rpx;
				img{
					width: 44rpx;
				}
			}
			.pop-box{
                .btn{
                    color: #808080;
                    img{
                        width: 17px;
                        vertical-align: bottom;
                    }
                }
				.t{
					width: 100%;
					text-align: left;
					color: #000;
					padding: 20rpx;
					img{
						width: 40rpx;
						height: 40rpx;
						position: relative;
						top: 12rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
        .text-btn{
			width: 123px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
            cursor: pointer;
			border-radius: 50px;
			background: rgba(255, 255, 255, 1);			
			border: 1px solid rgba(41, 103, 227, 1);
			.t{
				font-size: 16px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 23.17px;
				color: rgba(41, 103, 227, 1);
				text-align: left;
				vertical-align: top;
			}
			img{
				width: 17px;
			}
		}
		.inter-page{
			.inter-box{
				border-radius: 4px;
				padding: 20px 10px;
				background: #fff;
				.pic{
					width: 80px;
					height: 80px;
					margin: 0 auto;
					border-radius: 50%;
					img{
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}
				}
				.desc{
					// margin: 0 auto;
					.icon{
						width: 26rpx;
					}
					.t{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
				.cz-btn{
					padding: 0;
					margin-left: 5px;
					font-size: 12px;
					color: rgba(255, 255, 255, 1);
					width: 73px;
					height: 20px;
					line-height: 20px;
					border: none;
					border-radius: 20px;
					background: rgba(255, 87, 51, 1);
				}
				.save-btn{
					font-size: 16px;
					color: rgba(255, 255, 255, 1);
					width: 160px;
					height: 40px;
					border: none;
					border-radius: 50px;
					background: rgba(41, 103, 227, 1);
				}
				.points-btn{
					font-size: 16px;
					color: rgba(255, 255, 255, 1);
					width: 160px;
					height: 40px;
					border: none;
					border-radius: 50px;
					background: #ff8d1a;
				}
			}
		}
	}
</style>